<template>
	<view class="detail-page" v-for="item in imsrc">
		<view class="detail-title">
			<h3>对ACCA一无所知，要怎么准备2023年ACCA考试？（ACCA备考全攻略分享）</h3>
		</view>
		<view class="detail-user">
			<view class="imagetv">
				<u-avatar :src="imsrc.src"></u-avatar>
			</view>
			<view class="imagetv-text">
				<h5>{{item.text}}</h5>
			</view>
		</view>
		<view class="detail-upvote">
			{{item.persons}}人赞了同文章
		</view>
		<!-- 内容 -->
		<view class="detail-content">
			{{item.content}}
		</view>
		<!-- 底部 -->
		<view class="detail-footer-tool">
			<view class="align">
				<u-icon class="right-one" name="thumb-up" color="#6b7280" size="39"></u-icon>
				<u-icon class="right-one" name="heart" color="#6b7280" size="38"></u-icon>
				<u-icon @click="toggle=true" class="right-one" name="chat" color="#6b7280" size="40"></u-icon>
				<u-avatar :src="imsrc.src"></u-avatar>
			</view>
		</view>
		<u-popup class="upopup" v-model="toggle" mode="bottom" length="85%" border-radius="15">
			<view class="upopup-user">
				<view class="imagetv">
					<u-avatar :src="imsrc.src"></u-avatar>
				</view>
				<view class="imagetv-text">
					<h5>{{item.text}}</h5>
				</view>
			</view>
			<!-- 评论数量 -->
			<view class="upopup-comment">
				<view class="font">
					评论
				</view>
				<view class="font">
					{{item.comment}}
				</view>
			</view>
			<!-- 评论回复 -->
			<view class="upopup-comment-content">
				<view class="comments-section">
					<view class="imagetv">
						<u-avatar :src="imsrc.src"></u-avatar>
					</view>
					<view class="imagetv-text">
						<h5>{{item.text}}</h5>
					</view>
				</view>
				<view class="comments-content">
					有好多朋友私信我该怎么领资料，我在这里统一回复一下：

					直接点文章中的小卡片报名，提交后就可以免费领资料了，有手就行，非常简单。

					最后，祝好运，祝大家考证顺利通过~[红心][红心]
				</view>
				<view class="comments-time">
					16:13<view class="">
						<u-icon name="thumb-up" size="28"></u-icon>1
						<u-icon @click="togginst=true" name="chat" size="28"></u-icon>2
					</view>
				</view>
				<view class="comments-others">
					<view class="comments-section">
						<view class="imagetv">
							<u-avatar :src="imsrc.src"></u-avatar>
						</view>
						<view class="imagetv-text">
							<h5>{{item.text}}</h5>
						</view>
					</view>
					<view class="comments-content">
						有好多朋友私信我该怎么领资料，我在这里统一回复一下：

						直接点文章中的小卡片报名，提交后就可以免费领资料了，有手就行，非常简单。

						最后，祝好运，祝大家考证顺利通过~[红心][红心]
					</view>
					<view class="comments-time">
						16:13<view class="">
							<u-icon name="thumb-up" size="28"></u-icon>1
							<u-icon @click="togginst=true" name="chat" size="28"></u-icon>2
						</view>
					</view>
				</view>
				<view class="comments-section">
					<view class="imagetv">
						<u-avatar :src="imsrc.src"></u-avatar>
					</view>
					<view class="imagetv-text">
						<h5>{{item.text}}</h5>
					</view>
				</view>
				<view class="comments-content">
					有好多朋友私信我该怎么领资料，我在这里统一回复一下：

					直接点文章中的小卡片报名，提交后就可以免费领资料了，有手就行，非常简单。

					最后，祝好运，祝大家考证顺利通过~[红心][红心]
				</view>
				<view class="comments-time">
					16:13<view class="">
						<u-icon name="thumb-up" size="28"></u-icon>1
						<u-icon @click="togginst=true" name="chat" size="28"></u-icon>2
					</view>
				</view>
				<view class="comments-others">
					<view class="comments-section">
						<view class="imagetv">
							<u-avatar :src="imsrc.src"></u-avatar>
						</view>
						<view class="imagetv-text">
							<h5>{{item.text}}</h5>
						</view>
					</view>
					<view class="comments-content">
						有好多朋友私信我该怎么领资料，我在这里统一回复一下：

						直接点文章中的小卡片报名，提交后就可以免费领资料了，有手就行，非常简单。

						最后，祝好运，祝大家考证顺利通过~[红心][红心]
					</view>
					<view class="comments-time">
						16:13<view class="">
							<u-icon name="thumb-up" size="28"></u-icon>1
							<u-icon @click="togginst=true" name="chat" size="28"></u-icon>2
						</view>
					</view>
				</view>
			</view>
			<!-- 发表评论 -->
			<view class="upopup-footer-tool">
				<!-- <u-field v-model="mobile" placeholder="评论千万条,友善第一条"></u-field> -->
				<view class="upopup-footer-tool-input">
					<input type="text" placeholder="评论千万条,友善第一条">
				</view>
				<view class="upopup-footer-tool-font">发布</view>
			</view>
			<u-popup class="upopup" v-model="togginst" mode="bottom" length="9%" border-radius="15">
				<!-- 发表评论 -->
				<view class="upopup-footer-tool">
					<!-- <u-field v-model="mobile" placeholder="评论千万条,友善第一条"></u-field> -->
					<view class="upopup-footer-tool-input">
						<input type="text" placeholder="评论千万条,友善第一条">
					</view>
					<view class="upopup-footer-tool-font">发布</view>
				</view>
			</u-popup>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const imsrc = ref([{
		src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
		text: '土红的鸡蛋花',
		persons: 189,
		comment: 189,
		content: "ACCA是特许公认会计师公会（The Association Of Chartered Certified Accountants)的简称，在国内被称为“国际注册会计师”。是英国具有特许头衔的4家注册会计师协会之一，也是当今最知名的国际性会计师组织之一。被誉为“国际财会界的通行证”。ACCA协会规定，注册报名ACCA考试的考生须符合以下要求：（1）教育部认可的高等院校本科在校生(已顺利完成大一的课程考试);（2）具有教育部承认的大专以上学历;（3）未符合1、2项报名资格的申请者，年满16周岁的可以先申请参加FIA基础财务资格考试。申请者在完成FBT(基础商业会计)、FMA(基础管理会计)、FFA(基础财务会计)3门课程后，可以豁免ACCAF1-F3三门课程的考试，直接进入ACCA技能课程的考试。"
	}])
	const toggle = ref(false)
	const togginst = ref(false)
</script>

<style lang="scss">
	.detail-page {
		width: 100%;
		height: 100vh;
		background-color: white;

		.detail-title {
			display: flex;
			align-items: center;
			padding: 10px 20px;
		}

		.detail-user {
			display: flex;
			align-items: center;
			padding: 10px 8px;

			::v-deep .u-avatar__img[data-v-33f8f4cb] {
				width: 1.5rem;
				height: 1.5rem;
			}
		}

		.detail-upvote {
			display: flex;
			align-items: center;
			padding: 5px 20px;
			font-size: .4rem;
		}

		.detail-content {
			display: flex;
			align-items: center;
			padding: 5px 20px;
			font-weight: bold;
		}

		.detail-footer-tool {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
			border-radius: 10px 10px 0 0;

			.align {
				padding: 0px 10px;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.right-one {
					padding-right: .8rem;
				}

				::v-deep .u-avatar__img[data-v-33f8f4cb] {
					width: 1.5rem;
					height: 1.5rem;
				}
			}
		}

		.upopup {
			overflow-y: auto;

			.upopup-user {
				display: flex;
				align-items: center;
				padding: 10px 8px;

				::v-deep .u-avatar__img[data-v-33f8f4cb] {
					width: 1.5rem;
					height: 1.5rem;
				}

				border-bottom: 5px solid #f8f8f8;
			}

			.upopup-comment {
				display: flex;
				align-items: center;
				// justify-content: center;
				padding: 10px 20px;

				.font {
					font-size: .8rem;
					padding: 10px 1px;
				}
			}

			.upopup-comment-content {
				width: 100%;
				height: 100%;
				overflow-y: auto;

				.comments-section {
					width: 100%;
					height: 1.5rem;
					padding: 5px;
					display: flex;
					align-items: center;

					::v-deep .u-avatar__img[data-v-33f8f4cb] {
						width: 1.5rem;
						height: 1.5rem;
					}
				}

				.comments-content {
					width: 100%;
					padding: 5px 10px 5px 55px;
				}

				.comments-time {
					width: 100%;
					padding: 5px 10px 5px 55px;
					font-size: .5rem;
					display: flex;
					justify-content: space-between;
				}

				.comments-others {
					width: 100%;
					padding: 5px 10px 5px 40px;

					.comments-section {
						width: 100%;
						height: 1.5rem;
						padding: 5px;
						display: flex;
						align-items: center;

						::v-deep .u-avatar__img[data-v-33f8f4cb] {
							width: 1.5rem;
							height: 1.5rem;
						}
					}

					.comments-content {
						width: 100%;
						padding: 5px 5px 5px 55px;
					}

					.comments-time {
						width: 100%;
						padding: 5px 10px 5px 55px;
						font-size: .5rem;
						display: flex;
						justify-content: space-between;
					}
				}

			}

			.upopup-footer-tool {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				justify-content: flex-end;
				border-radius: 10px 10px 0 0;
				padding: 10px 20px 10px 0;

				.upopup-footer-tool-input {
					width: 90%;
					border-radius: 10px;
					padding: 5px 0;

				}

				.upopup-footer-tool-font {
					color: #8ac3f8;
				}

			}
		}
	}
</style>